<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>实例练习--jq选项卡</title>
    <script src="jquery.js"></script>
    <style>
        main{
            width:80%;
            margin: 50px auto;
            border:solid 2px #000;
        }
        ul,li{
            margin:0;
        }
        .tab{
            background:#000;
            color:#fff;
            list-style:none;
            padding:0;
            line-height: 40px;
        }
        .tab li{
            display:inline-block;
            padding:0 20px
        }
        .tab li.on{
            background:#ccc;
            color:#000;
            border:solid 1px #000
        }
        .list{
            position: relative;
            height:300px;
        }
        .list ul{
            position:absolute;
            display:none;
            margin:30px 0
        }
        .list ul.active{
            display:block;
        }
    </style>
</head>
<body>
<main>
    <ul class="tab">
        <li class="on"> 第一课 </li>
        <li> 第二课 </li>
        <li> 第三课 </li>
    </ul>
    <div class="list">
        <ul class="active">
            <li> 基本知识内容1 </li>
            <li> 基本知识内容2 </li>
            <li> 基本知识内容3</li>
            <li> 基本知识内容4 </li>
            <li> 基本知识内容5 </li>
            <li> 基本知识内容6 </li>
        </ul>
        <ul>
            <li> Javascript基本知识内容1 </li>
            <li> Javascript基本知识内容1 </li>
            <li> Javascript基本知识内容1 </li>
            <li> Javascript基本知识内容1 </li>
            <li> Javascript基本知识内容1 </li>
            <li> Javascript基本知识内容1 </li>


        </ul>
        <ul>
            <li> CSS基本内容展示 </li>
            <li> CSS基本内容展示 </li>
            <li> CSS基本内容展示 </li>
            <li> CSS基本内容展示 </li>
            <li> CSS基本内容展示 </li>
            <li> CSS基本内容展示 </li>

        </ul>
    </div>
</main>
</body>
<script>
    $('.tab li').each(function(ins){
        $(this).click(function(){
            $(this).addClass('on').siblings().removeClass('on')
            console.log(ins)
            $('.list ul').eq(ins).addClass('active').siblings().removeClass('active')
        })
    })
</script>
</html>
